<template>
  <view>
    <view class="aBox" v-for="(item,index) in dynamicList" :key="index">
      <view class="flex alignCenter justifyBetween">
        <view class="time">{{item.date}}
          <text>/{{item.day}}</text>
        </view>
        <uv-icon name="more-dot-fill" color="#999999"></uv-icon>
      </view>
      <view class="cont" v-for="(e,i) in item.data" :key="i">
        <view class="fz12" style="margin-bottom: 6px;">{{e.text}}</view>
        <view v-if="e.medias.length">
          <view class="video" v-if="e.medias.length==1 && counter.isImageOrVideo(e.medias[0])=='video'">
            <video :src="e.medias[0]"></video>
          </view>
          <view v-else class="grids medias gridColumns3">
            <view class="grid" v-for="(media,j) in e.medias" :key="j">
              <image :src="media" mode="aspectFill" @click.stop="proxy.$auth.previewImage(e.medias,j)" />
            </view>
          </view>
        </view>

        <view class="other flex justifyEnd alignCenter">
          <view class="like flex  alignCenter" @click="isLike(e)">
            <view class="icon">
              <image v-if="e.hasLiked==0" src="https://oss.seenlove.com/images/7a4cecf3a3f076442068d0cdb3e5c67c.png" mode="widthFix" />
              <image v-else src="https://oss.seenlove.com/images/208088cab7ca72a7632d2b3eaf842c37.png" mode="widthFix" />
            </view>
            {{e.likeCount||0}}
          </view>
          <view class="chat flex  alignCenter">
            <view>
              <uv-icon name="chat" color="#999999" size="14"></uv-icon>
            </view>
            <text>{{e.commentCount||0}}</text>
          </view>
        </view>
      </view>
    </view>

    <uv-load-more :status="status" />
  </view>
</template>

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();

let status = ref("loadmore"); //加载更多状态
let dynamicList = ref([]); //动态列表
let movementsParams = ref({
  page: 1,
  pageSize: 10,
  userId: "",
}); //动态参数
let total = 0; //动态总数

onMounted(() => {
  getMovements();
});

let getMore = () => {
  if (dynamicList.value.length >= total) return;
  movementsParams.value.page++;
  getMovements();
};

let getMovements = async () => {
  try {
    if (!counter.isLogin) return;
    movementsParams.value.userId = counter.slParams.userInfo.userId;
    status.value = "loading";
    let resp = await proxy.$apis.movements(movementsParams.value);
    let arr = proxy.$utils.deepcopy(dynamicList.value);
    if (resp.records.length) {
      arr = proxy.$utils.filterArr(arr, resp.records, "id");
    }
    dynamicList.value = arr;
    total = resp.total;
  } catch (error) {
  } finally {
    status.value = "nomore";
  }
};

defineExpose({ getMore });
</script>



<style lang="scss" scoped>
.aBox {
  margin-bottom: 20px;
  .time {
    color: #333333;
    font-size: 16px;
    text {
      color: #999999;
      font-size: 14px;
    }
  }
  .cont {
    padding: 15px;
    .video {
      margin-top: 6px;
      video {
        border-radius: 5px;
        height: 227px;
      }
    }
    .medias {
      gap: 5px 5px; //上下间距 左右间距
      .grid {
        aspect-ratio: 1/1;
        image {
          width: 100%;
          display: block;
          height: 100%;
          border-radius: 3px;
        }
      }
    }

    .other {
      margin-top: 10px;
      .like {
        color: #999999;
        font-size: 12px;
        .icon {
          width: 13px;
          margin-right: 2px;
          image {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
      }
      .chat {
        color: #999999;
        font-size: 12px;
        margin-left: 10px;
        text {
          margin-left: 5px;
        }
      }
    }
  }
}
</style>



